{extend name="base" /}
{block name="content"}
<style type="text/css">
    .yichu{
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
</style>
<!-- Start Content-->
<div class="container-fluid">
    
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{:url('index/index')}"><i class="fe-home"></i> 控制台</a></li>
                        <li class="breadcrumb-item active"> New Collection</li>
                    </ol>
                </div>
                <h4 class="page-title"> New Collection</h4>
            </div>
        </div>
    </div>     
    <!-- end page title --> 
    <div class="row">
        <div class="col-12">
            <div class="card-box">
                <div class="row">
                    <div class="col-lg-8">
                        <form class="form-inline" action="/admin/collection/index" method="get">
                            <div class="form-group">
                                <label for="inputPassword2" class="sr-only">Search</label>
                                <input type="text" value="{$Think.get.keywords}" class="form-control form-control-sm" id="keywords" name="keywords" placeholder="关键词">
                            </div>
                            <div class="form-group">
                                <button type="submit" class="form-control form-control-sm btn-sm btn-success" style="cursor: pointer;margin-right: 10px;margin-left: 10px;"><i class="fe-search"></i> 搜索</button>
                            </div>
                        </form>
                    </div>
                    <div class="col-lg-4">
                        <div class="text-lg-right mt-3 mt-lg-0">
                            <a href="{:url('collection/add')}" class="btn btn-danger waves-effect waves-light"><i class="mdi mdi-plus-circle mr-1"></i> Add Collection</a>
                        </div>
                    </div><!-- end col-->
                </div> <!-- end row -->
            </div> <!-- end card-box -->
        </div> <!-- end col-->
    </div>
    <!-- end row-->

    <div class="row">
        {foreach $list as $key => $val}
        <div class="col-md-6 col-xl-3">
            <div class="card-box product-box">

                <div class="product-action">
                    <a href="{:url('collection/edit', array('id' => $val['id']))}" class="btn btn-success btn-xs waves-effect waves-light"><i class="mdi mdi-pencil"></i></a>
                    <a href="javascript: void(0);" onclick="del(this)" data-id="{$val.id}" class="btn btn-danger btn-xs waves-effect waves-light"><i class="mdi mdi-close"></i></a>
                </div>

                <div>
                    <img src="/uploads/{$val['pic']}" alt="product-pic" class="img-fluid" />
                </div>

                <div class="product-info">
                    <div class="row align-items-center">
                        <div class="col">
                            <p class="m-0 yichu"> <span class="text-muted"> {$val['title']}</span></p>
                        </div>
                    </div> <!-- end row -->
                </div> <!-- end product info-->
            </div> <!-- end card-box-->
        </div> <!-- end col-->
        {/foreach}
    </div>
    <!-- end row-->
    {$list->render()}
</div> <!-- container -->
<script src="/static/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['element', 'form', 'layedit','upload'], function () {
        var form = layui.form;
        var $ = layui.jquery,upload = layui.upload;
    })
    function del(e){
        var id = $(e).attr('data-id')
        layer.confirm('确认删除？', {
            btn: ['确定','取消'],
            title: '操作提示',
            icon: 7,
        }, function(){
            $.post('/admin/collection/del',{id:id},function(res){
                if(res.code == 0){
                    layer.msg(res.message,{icon:1, shade: [0.2, '#ccc'], time:800});
                    // window.open(res.data);
                    $(e).parents("tr").remove();
                }else{
                    layer.msg(res.message,{icon:5, anim: 6});
                }
            },'json');
        });
    }
</script>
{/block}